<template>
  <bm-overlay
    ref="customOverlay"
    :class="{ sample: true }"
    pane="labelPane"
    @draw="draw"
  >
    <div @touchstart="$emit('change')">
      <span>{{ item.label }}</span>
      <span>{{ item.count }}套</span>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      position: {}
    }
  },
  computed: {
  },
  watch: {
    item: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  created () {
  },
  methods: {
    draw ({ el, BMap, map }) {
      const { latitude: lat, longitude: lng } = this.item.coord
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 35 + 'px'
      el.style.top = pixel.y - 35 + 'px'
    }
  }
}
</script>

<style lang="less">
.sample {
  text-align: center;
  width: 70px;
  height: 70px;
  line-height: 1;
  display: inline-block;
  position: absolute;
  border-radius: 100%;
  background: rgba(12, 181, 106, 0.9);
  color: #fff;
  border: 2px solid hsla(0, 0%, 100%, 0.8);
  text-align: center;
  cursor: pointer;
  span {
    line-height: 30px;
    text-align: center;
    display: block;
    font-size: 14px;
  }
}
</style>
